<template>
  <div class="home">
    <div class="top_status">
      <img
        class="pay_icon"
        :src="
          require(`@/assets/images/${
            dataSource.state == 1 ? 'success' : 'pay'
          }.png`)
        "
      />
      {{ dataSource.state == 1 ? "已支付" : "待付款" }}
    </div>

    <div class="order">
      <div class="order_item">
        <div class="orderbox">
          <div class="order_lt">
            <img class="order_img" :src="dataSource.imageList" />
          </div>
          <div class="order_rt">
            <div class="order_tt">{{ dataSource.name }}</div>
            <div class="order_num">x1</div>
            <div class="order_price">¥{{ dataSource.price }}</div>
          </div>
        </div>
        <div class="order_tip">此商品暂不支持退款，如有疑问可与卖家沟通</div>
        <div class="order_info">
          <div class="order_time">商品金额</div>
          <div class="order_allPrice">{{ dataSource.price }}</div>
        </div>
        <div class="order_relprice" v-if="dataSource.state == 1">
          实付款<span class="txt">¥{{ dataSource.price }}</span>
        </div>
      </div>
    </div>
    <div class="orderNo">
      <div class="orderNo_item">订单编号：{{ dataSource.orderId }}</div>
      <div class="orderNo_item">下单时间：{{ dataSource.createTime }}</div>
      <div class="orderNo_item mb0">
        付款时间：{{ dataSource.state == 1 ? dataSource.updateTime : "待付款" }}
      </div>
      <div class="copy_btn" @click="handleCopy">复制</div>
    </div>

    <div class="footer">
      <div class="footerbox">
        <div
          class="menu_item"
          :class="menuIndex == index ? 'active' : ''"
          v-for="(item, index) in menuList"
          :key="index"
          @click="goRouter(item, index)"
        >
          <img
            class="menu_icon"
            :src="menuIndex == index ? item.img2 : item.img"
          />
          <div class="menu_name">{{ item.name }}</div>
        </div>
        <div class="buy_btn" @click="handleBuy">
          {{ dataSource.state == 1 ? "兑换红包封面" : "立即购买" }}
        </div>
      </div>
    </div>
    <div class="online">
      <a
        class="onlinebox"
        href="https://chatbot.weixin.qq.com/webapp/E9TygITgqlKlqnLZSocbGozbdrjwt3?robotName=%E5%AE%A2%E6%9C%8D"
      >
        在线客服
      </a>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import commonApi from "@/api/commonApi";
import { getCookies, copyToClipboard, getQueryString } from "@/utils/util.js";

import nav1 from "@/assets/images/nav1.png";
import nav1_check from "@/assets/images/nav1_check.png";
import nav2 from "@/assets/images/nav2.png";
import nav2_check from "@/assets/images/nav2_check.png";
export default {
  components: {
    Toast,
  },
  data() {
    return {
      menuList: [
        { img: nav1, img2: nav1_check, name: "商城", url: "/home" },
        { img: nav2, img2: nav2_check, name: "订单", url: "/order" },
      ],
      menuIndex: 1,
      dataSource: {
        bagId: "",
        createBy: "",
        createTime: "",
        extraInfo: null,
        imageList: "",
        name: "",
        orderId: "",
        price: "",
        remark: "",
        state: "",
        updateBy: "",
        updateTime: "",
        userId: "",
        uta: "",
        vedioList: "",
      },
      orderId: "",
    };
  },

  mounted() {
    if (getQueryString("uta")) {
      localStorage.setItem("uta", getQueryString("uta"));
    }
    // if (getCookies('orderId')) {
    //   this.orderId = getCookies('orderId')
    //   this.getDetail(this.orderId)
    // }
    if (this.$route.query && this.$route.query.orderId) {
      this.orderId = this.$route.query.orderId;
      // this.getDetail(this.orderId);
      this.getDetail(this.orderId);
    }
  },

  methods: {
    getDetail(orderId) {
      commonApi.getUserOrderDetail({ orderId }).then((res) => {
        this.dataSource = res;
      });
    },
    handleBuy() {
      let vm = this;
      if (this.dataSource.state == 1) {
        let extraInfo = JSON.parse(this.dataSource.extraInfo);
        if (extraInfo && extraInfo.pickCode) {
          window.location.href = extraInfo.pickCode;
        }
      } else {
        if (getCookies("userId")) {
          commonApi
            .getPayInfo({
              openid: getCookies("openid") || "",
              userId: getCookies("userId") || "",
              orderId: this.orderId,
            })
            .then((el) => {
              let payInfo = JSON.parse(el.payInfo);
              let data = payInfo.wechatData;
              wx.config({
                debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timeStamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.sign, // 必填，签名
                jsApiList: ["chooseWXPay", "checkJsApi"], // 必填，需要使用的JS接口列表
              });

              wx.ready(() => {
                wx.chooseWXPay({
                  timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                  nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                  package: data.packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                  signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                  paySign: data.sign, // 支付签名
                  success: function (payRes) {
                    // 支付成功后的回调函数
                    Toast("支付成功");
                    vm.getDetail(vm.orderId);
                  },
                  cancel: function (payRes) {
                    // that.$message.error('取消支付')
                  },
                  fail: function (payRes) {
                    // that.$message.error('支付失败')
                  },
                });
              });
            });
        }
      }
    },

    goRouter(data) {
      this.$router.push(data.url);
    },
    handleCopy() {
      copyToClipboard(this.dataSource.orderId);
      Toast("复制成功");
    },
  },
};
</script>
<style>
body {
  background: #f6f5fa;
}
</style>
<style lang="less" scoped="">
.home {
  margin: auto;
  background: #f6f5fa;
  padding-bottom: 60px;

  .top_status {
    padding: 20px;
    display: flex;
    align-items: center;
    background: #fff;
    margin: 15px;
    border-radius: 5px;
    margin-bottom: 10px;

    .pay_icon {
      width: 30px;
      margin-right: 10px;
    }
  }

  .order {
    padding: 15px;
    padding-top: 0;
    padding-bottom: 0;

    .order_item {
      background: #fff;
      border-radius: 7px;
      padding: 15px;
      margin-bottom: 10px;

      .order_status {
        text-align: center;
        font-size: 12px;
        border: 1px solid #dfdfdf;
        float: right;
        padding: 8px 10px;
        border-radius: 3px;
        margin-bottom: 10px;
        color: #666;
      }

      .orderbox {
        clear: both;
        display: flex;

        .order_lt {
          width: 90px;
          height: 90px;
          border-radius: 8px;
          overflow: hidden;

          .order_img {
            width: 100%;
          }
        }

        .order_rt {
          flex: 1;
          padding-top: 10px;
          padding-left: 10px;
          position: relative;

          .order_tt {
            font-size: 15px;
            font-weight: 400;
          }

          .order_num {
            position: absolute;
            right: 0;
            bottom: 25px;
            font-size: 14px;
          }

          .order_price {
            position: absolute;
            right: 0;
            font-size: 14px;
            bottom: 0;
            font-weight: 500;
          }
        }
      }

      .order_tip {
        font-size: 12px;
        color: #d19955;
        padding-top: 10px;
      }

      .order_info {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: center;
        padding-top: 10px;

        .order_time {
          font-size: 14px;
          color: #333;
        }

        .order_allPrice {
          font-size: 14px;
        }
      }

      .order_relprice {
        display: flex;
        width: 100%;
        justify-content: end;
        font-size: 14px;

        margin-top: 10px;

        .txt {
          color: #f53939;
          font-weight: 500;
          margin-left: 10px;
        }
      }
    }
  }

  .orderNo {
    background: #fff;
    margin: 15px;
    padding: 15px;
    margin-top: 0;
    border-radius: 8px;
    position: relative;

    .orderNo_item {
      font-size: 14px;
      color: #666;
      margin-bottom: 15px;
    }

    .mb0 {
      margin-bottom: 0;
    }

    .copy_btn {
      position: absolute;
      top: 15px;
      right: 15px;
      color: #332cb3;
      font-size: 14px;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;

    .footerbox {
      display: flex;
      align-items: center;
      margin: auto;
      max-width: 500px;
    }

    .menu_item {
      color: #999faa;
      width: 33%;
      text-align: center;
      padding: 10px 0;

      .menu_icon {
        display: block;
        margin: auto;
        width: 20px;
      }

      .menu_name {
        font-size: 12px;
        margin-top: 5px;
      }

      &.active {
        color: #f53939;
      }
    }

    .buy_btn {
      background: linear-gradient(270deg, #ee0c24 0%, #fe5e33 100%);
      font-size: 14px;
      border-radius: 4px;
      padding: 3px 14px;
      text-align: center;
      color: #fff;
      height: 26px;
      line-height: 26px;
      margin: auto;
    }
  }

  .online {
    padding-right: 15px;
    display: inline-block;
    text-align: right;
    float: right;

    .onlinebox {
      text-align: center;

      width: 80px;
      border: 1px solid #ececec;
      font-size: 12px;
      padding: 8px 20px;
      border-radius: 30px;
      background: #fff;
    }
  }
}
</style>
